<template>
	<view class="page">
		<!-- 收藏 - 商品 - 找相似 wwl -->
		<view class="select_box">
			<input type="text" v-model='title' confirm-typ="search" @confirm="page = 1;getList()"
				class="select_text2" :focus="isFocus" @focus='isFocus = true' @blur='isFocus = false' />
			<view class="select_text1" v-if='!title && !isFocus' @click="isFocus = true">
				<image
					src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png"
					mode="scaleToFill"></image>
				<text>搜索</text>
			</view>
		</view>
		<scroll-view style='height:100%' enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore">
			<view class="">
				<block>
					<view class="list_box" v-if="total >  0">
						<renovation-row :list='list' :page='page' :size='size'
							:type='type' />
					</view>
					<empty status='2' v-if='total == 0 && !loading ' />
				</block>
			</view>
			<foot />
		</scroll-view>

	</view>
</template>

<script>
	import {
		getGuessYouLike
	} from "@/utils/getRequest.js"
	import renovationRow from '@/components/renovation-row.vue'
	export default {
		components: {
			renovationRow
		},
		data() {
			return {
				title: '',
				list:[],
				page: 1,
				size: 10,
				total: 0,
				loading: false,
				type:'',
			}
		},
		methods: {
			loadMore() {
				if (this.page * this.size >= this.total || this.loading) return
				this.page++
				this.getList()
			},
			async getList() {
				this.loading = true
				var zone_id = this.type == 'buildingMaterialsCity' ? this.$store.state.currentArea ? this.$store.state
					.currentArea.cityId : '' : this.$store.state.addressSelect ? this.$store.state.addressSelect.id :
					''
				try {
					var res = await getGuessYouLike({
						shopping_id: this.shopping_id,
						goods_id: this.id,
						page: this.page,
						limit: this.size,
						title:this.title,
						type : this.type == 'findCraftsman' ? 1 : 2,
						zone_id
					})
					this.list = this.page == 1 ? res.list : [...this.list, ...res.list]
					this.total = res.count
					this.loading = false
				} catch {
					this.loading = false
				}
			}
		},
		onLoad(params) {
			this.type = params.type
			this.shopping_id = params.shopping_id
			this.goods_id = params.goods_id
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color: #fff;
	}

	.page {
		background-color: #fff;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	}
	.select_box{
		position: relative;
		padding: 20rpx 36rpx;
		width: 100%;
		box-sizing: border-box;
		.select_text2{
			width: 100%;
			height: 66rpx;
			background: #f8faff;
			border-radius: 34rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color:#333;
			text-align: center;
			padding: 0 26rpx ;
			box-sizing: border-box;
		}
		.select_text1{
			font-size: 28rpx;
			line-height: 40rpx;
			color:#ADADAD;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
	}
	.list_box {
		padding: 0 36rpx;
		box-sizing: border-box;
		width: 100%;
		min-height: 60vh;
	}
</style>
